<template>
  <div class="block">
    <div style="margin-top: 10px; margin-left: 10px;">
      <el-date-picker v-model="timeRanges" type="datetimerange" start-placeholder="请选择开始日期时间"
        end-placeholder="请选择结束日期时间">
      </el-date-picker>
      <el-select v-model="eventId" placeholder="请选择事件类型" style="width: 400px">
        <el-option v-for="item in eventNames" :key="item.id" :label="item.chinese" :value="item.id">
        </el-option>
      </el-select>
      <el-button type="success" @click="searchEvents">查询</el-button>
    </div>

    <div v-if="1 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="globalEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterglobalEventChange">
        <el-table-column prop="appearTime" align="center" width="180" label="发生时间" :sortable="true" />
        <el-table-column prop="deviceId" align="center" width="180" label="设备ID" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="descrption" align="center" label="事件描述" />
      </el-table>
    </div>

    <div v-if="2 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="singleEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterSingleEventChange">
        <el-table-column prop="appearTime" align="center" label="发生时间" width="180" :sortable="true" />
        <el-table-column prop="deviceId" align="center" width="180" label="设备ID" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="eventType" align="center" label="事件类型" />
        <el-table-column prop="eventReason" align="center" label="事件原因" />
      </el-table>
    </div>

    <div v-if="3 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="singleEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterSingleEventChange">
        <el-table-column prop="appearTime" align="center" label="发生时间" width="180" :sortable="true" />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="eventType" align="center" label="事件类型" />
        <el-table-column prop="eventReason" align="center" label="事件原因" />
      </el-table>
    </div>

    <div v-if="4 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="singleEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterSingleEventChange">
        <el-table-column prop="appearTime" align="center" label="发生时间" width="180" :sortable="true" />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="statusBeforeChanged" align="center" label="变更前定位状态" />
        <el-table-column prop="statusAfterChanged" align="center" label="变更后定位状态" />
      </el-table>
    </div>

    <div v-if="5 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="singleEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterSingleEventChange">
        <el-table-column prop="appearTime" align="center" label="发生时间" width="180" :sortable="true" />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="preWarnsNumBeforeChanged" align="center" label="变更前预警目标点个数" />
        <el-table-column prop="preWarnsNumAfterChanged" align="center" label="变更后预警目标点个数" />
      </el-table>
    </div>

    <div v-if="6 === this.queryData.eventId">
      <el-table v-loading="loading"
        :data="singleEventTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        :default-sort="{ prop: 'appearTime', order: 'descending' }" style="width: 100%" ref='refsTable'
        :height="tableHeight" @filter-change="filterSingleEventChange">
        <el-table-column prop="appearTime" align="center" label="发生时间" width="180" :sortable="true" />
        <el-table-column prop="deviceId" align="center" label="设备ID" width="180" />
        <el-table-column prop="deviceType" align="center" width="180" label="设备类型" :filters="filters"
          :filter-multiple="false" column-key="deviceType" />
        <el-table-column prop="fence_id" align="center" label="围栏ID" />
        <el-table-column prop="fenceRelationBeforeChanged" align="center" label="变更前与围栏关系" />
        <el-table-column prop="fenceRelationAfterChanged" align="center" label="变更后与围栏关系" />
      </el-table>
    </div>

    <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :page-size="pagesize" :page-sizes="[20, 40, 100, 200, 500]"
      :total="totalDataLength" :current-page="currentPage" align="center">
    </el-pagination>
  </div>
</template>
<script>
import script from './script'
export default script
</script>
<style lang="scss" scoped>
@import './style.scss'
</style>
